<template>
  <div class="home">
    <van-nav-bar title="随机单词"/>
    <!-- 帮助按钮，提示用法 -->
    <van-icon class="help" name="info-o" @click="help" />
    <van-icon class="set" name="setting-o" @click="set"/>
    <!-- 头部图片 -->
    <header class="header">
      <img src="../../assets/1.jpg" alt="">
    </header>
    <!-- 内容区域 -->
    <!-- 抽单词按钮 -->
    <div class="btn">
      <van-button type="warning" @click="Word">抽一下</van-button>
    </div>
    <div class="btn">
      <van-button type="warning" @click="LastWord">上一个</van-button>
    </div>
    <!-- 模态框 -->
    <van-popup class="vanpopup" id="mainpop" v-model="show" :close-on-click-overlay='false'>
      <div class="vanpopup">
        <!-- 显示单词 -->
        <div class="award" @click="Mean(word)">
          {{word.word}}
        </div>
        <!-- 填写单词意思的输入框，判定是否正确按钮 -->
        <input v-model="value" type="text" placeholder="单词意思" class="wordmean"/>
        <input type="submit" id="btn" value="对吗？" @click="Right(word)"/>
      </div>
      <!-- 确定按钮，关闭模态框 -->
      <van-button type="warning" round @click="show=false"
       style="margin-top:10px; margin-bottom:10px">关 闭</van-button>
    </van-popup>
    <van-popup v-model="show2" position="bottom" round :style="{height:'50%'}">
      <!-- dialog标题 -->
      <div class="dialogtitle">设置随机单词开始结束</div>
      <!-- dialog表单 -->
      <van-form v-model="form" @submit="setNum()">
        <van-field class="Text" type="digit" v-model="number" label="单词总数" readonly/>
        <van-field class="Text" type="digit" v-model="start" label="开始数目" placeholder="从第几个单词开始"
          :rules="[{ required: true, message: '请填写开始于第几个单词' }]"/>
        <van-field class="Text" type="digit" v-model="end" label="结束数目" placeholder="从第几个单词结束"
          :rules="[{ required: true, message: '请填写结束于第几个单词' }]"/>
        <!-- 按钮，更改设置 -->
        <van-button class="dialogbtn" round type="info" >确 定</van-button>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from 'vant';
import axios from '../../http/axios'
export default {
  data(){
    return {
      show: false,    // 模态框开关
      show2: false,   // 模态框开关2
      words:[],   // 存储数据库返回的单词数据
      word:'',
      number:'',
      num:0,    // 随机数
      value:'',   // 回答单词意思输入框的值
      message:'',   // 单词意思dialog信息
      form:{},    // 表单所填内容
      start:1,    // 开始的单词数
      end:10,     // 结束的单词数
    }
  },
  created(){
    this.findNum();
    this.findAllWord();
  },
  methods:{
    findAllWord(){
      axios.get('/word/findAll').then((res)=>{
          this.words = res.data
      })
    },
    // 查询单词总数
    findNum(){
        axios.get('/word/findnum').then((res)=>{
            this.number = res.data[0]['count(id)']
            this.end = this.number
        })
    },
    // 随机单词
    Word(){
      let n = 0;
      do{
        n = Math.floor(this.start - 1 + Math.random() *(this.end - this.start));
      }while(this.num == n)
      this.num=n;
      this.value='';
      this.WhichOne(n);
      this.show=true;
    },
    // 上一个单词
    LastWord(){
      this.WhichOne(this.num);
      this.show=true;
    },
    // 点击单词弹出单词意思
    Mean(w){
      // 对意思进行处理，如果有两个意思用逗号隔开
      if(w.mean2==''||w.mean2==null){
        this.message=w.mean1;
      }else{
        this.message=w.mean1 + ',' + w.mean2;
      }
      Dialog.alert({
        title: '意思',
        message: this.message,
        theme: 'round-button',
      })
    },
    Right(w){
      if(this.value==w.mean1||this.value==w.mean2&&this.value!=''){
        // 当回答正确弹出的dialog
        Dialog.alert({
          title: '正确',
          message: '恭喜你！答对了！',
          theme: 'round-button',
        })
      }else if(this.value!=''){
        // 当填写与数据库返回不符时弹出的dialog
        Dialog.alert({
          title: '答错了哦',
          message: '再试一下吧^_^',
          theme: 'round-button',
        })
      }else{
        // 当输入框为空时弹出的dialog
        Dialog.alert({
          title: '输入值为空',
          message: '亲！您还没填写你心中的答案',
          theme: 'round-button',
        })
      }
    },
    // 随机单词（按随机出的单词id查找单词）
    WhichOne(n){
      this.word = this.words[n]
      // let ID = n + 1
      // axios.get('/word/findById?id='+ID).then((res)=>{
      //     this.words = res.data
      // })
    },
    // 帮助
    help(){
        Dialog.alert({
          title: '帮助',
          message: '本页面为随机单词页面，可以进行对单词库里的单词随机抽取，抽取出来的单词点击单词格子可以提示意思，也可以在下方输入框输入单词意思看自己是否认得',
          theme: 'round-button',
        })
    },
    set(){
      this.show2 = true;
    },
    setNum(){
      if(Number(this.start<=0)){
        Dialog.alert({
          title: '错误',
          message: '请输入正整数',
          theme: 'round-button'
        })
      }else if(this.end>this.number){
        Dialog.alert({
          title: '错误',
          message: '结束值请小于等于总单词数目',
          theme: 'round-button'
        })
      }else if(Number(this.start) < Number(this.end)){
        this.show2=false
      }else{
        Dialog.alert({
          title: '错误',
          message: '结束值请比开始值大',
          theme: 'round-button'
        })
      }
      
    }
  }
}
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
.header {
  text-align: center;
  height: 300px;
  overflow: hidden;
}
.header img {
  padding-top: 50px;
  width: 60%;
}
.help{
  font-size: 20px;
  position: fixed;
  top: 70px;
  right: 30px;
}
.set{
  font-size: 20px;
  position: fixed;
  top: 110px;
  right: 30px;
}
.btn{
  text-align:center;
  padding-bottom: 10px;
}
.award{
  border-radius: 25px;
  text-align: center;
  margin-top: 30px;
  padding-top: 50px;
  margin-bottom: 15px;
  margin-left: 25%;
  width: 50%;
  height: 100px;
  font-size: 20px;
  /* color: white; */
  border: solid 1px black;
  background: #fff;
}
.vanpopup{
  text-align:center;
  background: #00000000;
}
#mainpop{
  border-radius: 10px;
  width: 60%;
  background-image: url(../../assets/2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.wordmean{
  width: 40%;
  height: 16px;
  padding: 12px 16px;
  font-size: 16px;
  margin: 0;
  vertical-align: top;
  outline: 0;
  box-shadow: none;
  border-radius: 10px 0 0 10px;
  border: 2px solid #c4c7ce;
  background: #fff;
  color: #222;
  overflow: hidden;
}
#btn{
  cursor: pointer;
  width: 30%;
  height: 44px;
  line-height: 45px;
  padding: 0;
  background: 0 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 17px;
  color: #fff;
  box-shadow: none;
  font-weight: 400;
  border: none;
  outline: 0;
}
.dialogtitle{
  font-size: 18px;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.Text{
  padding-top: 16px;
}
.dialogbtn{
  width: 90%;
  position: fixed;
  bottom: 16px;
  left: 5%;
}
</style>